<template>
    <div class="outer">
        <div class="mid">
            <ul>
                <li @click="judge($event,'CheckInformation')">查看个人信息<van-icon name="arrow"/></li>
                <li @click="judge($event,'ModifyingInformation')">修改头像<van-icon name="arrow"/></li>
                <li  @click="judge($event,'Collection')">我的收藏<van-icon name="arrow"/></li>
                <li  @click="toLog">历史记录<van-icon name="arrow"/></li>
                <van-button type="info" size="large" style="margin-top: 20px" v-show="$store.state.isLogin" @click="logOuto">退出登录</van-button>
            </ul>
        </div>

    </div>
</template>

<script>
    import {logOut} from "../api/api";
    import { Toast } from 'vant';

    export default{
        name: "PersonalInfor",
        data(){
            return{
                com:""
            }
        },
        methods:{
            logOuto(){
                console.log(10)
                logOut().then(res=>{
                    console.log(res)
                    if(res.code==403){
                        this.$store.state.isLogin=false;
                        this.$router.push("/myapp/user")
                    }
                })
            },
            judge(e,com){
                console.log(e)
                console.log(com)
                this.com=com;
                if(!this.$store.state.isLogin){
                    Toast("请登录");
                    this.$router.push("/login")
                }else{
                    this.$router.push(`/${this.com}`)

                }
            },
            toLog(){
                if(this.$store.state.isLogin) {
                    Toast("敬请期待！");
                }else{
                    Toast("请登录");
                    this.$router.push("/Login/Login1")
                }
            }
        },
        created(){
            console.log(this.$store.state.isLogin)

        }
    }
</script>

<style scoped>
.mid {
    margin-top: 10px;
    padding: 10px;
    width: 100%;
    height: 410px;
    box-sizing: border-box;
    background-color: white;
}
    .mid ul{
        list-style: none;

    }
.mid ul>li{
    padding: 10px;
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f3f0f0;
}
</style>